<extend name="Common/back" />

<block name="content">

    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a href="{:U('set')}" data-toggle="tooltip" title="新增"
                    class="btn btn-primary"> <i class="fa fa-plus"></i>
                    </a>
                    <button type="button" data-toggle="tooltip" title="删除"
                    class="btn btn-danger" id="button-delete">
                        <i class="fa fa-trash-o"></i>
                    </button>
                </div>
                <h1>分类管理</h1>
                <ul class="breadcrumb">
                    <li>
                        <a href="{:U('Manage/index')}">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">分类管理</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-list"></i>
                        分类列表
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="well">
                        <form action="{:U('list')}" method="get">
                        </form>
                    </div>
                    <form action="{:U('multi')}" method="post" enctype="multipart/form-data" id="form-list">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <td style="width: 1px;" class="text-center">
                                        <input type="checkbox" id="input-all"/>
                                    </td>

                                                               <td class="text-left">
  <a href="{:sortU('list', $filter, $sort, 'category_title')}"
  class="{:sortClass($sort, 'category_title')}">分类</a>
                </td><td class="text-left">
  启用
</td><td class="text-left">
  是否导航
</td>                           <td class="text-left">
  <a href="{:sortU('list', $filter, $sort, 'sort_number')}"
  class="{:sortClass($sort, 'sort_number')}">排序</a>
                </td>

                                    <td class="text-right">管理</td>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="rows" id="row">
                                <tr data-deep="{$row['deep']}" data-status="hide" style="<if condition="$row['deep']
                                    neq 0">display:none;</if>">
                                    <td class="text-center">
                                        <input type="checkbox" name="selected[]"
                                        value="{$row['category_id']}" />
                                    </td>

                                    <td class="text-left">{:str_repeat('&nbsp;',$row['deep']*4)}
                                        <a href="" class="link-deep"><i class="fa fa-minus"></i></a>
                                        {$row['category_title']}</td><td class="text-left">{$row['is_used']}</td><td class="text-left">{$row['is_nav']}</td><td class="text-left">{$row['sort_number']}</td>

                                    <td class="text-right">
                                        <a href="{:U('set', ['category_id'=>$row['category_id']])}"
                                        data-toggle="tooltip" title="编辑" class="btn btn-primary">
                                        <i class="fa fa-pencil"></i></a>
                                    </td>
                                </tr>
                                </volist>
                                </tbody>
                            </table>
                        </div>
                    </form>
                    <div class="row">
                        {$page_html}
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="appendJs">

    <script>
        // 全选操作
        $(function() {
            $('#input-all').click(function(evt) {
                // 找到其他的checkbox, 让其checked状态, 与当前的all一致.
                $(':checkbox[name="selected[]"]').prop('checked', $(this).prop('checked'));
                // attr使用在字符串属性上, prop使用在布尔值属性上(checked, selected, readonly, disabled), data使用在数据属性(data-attr)
            });
        });
    </script>

    <script>
        // 确认删除
        $(function(){
            $('#button-delete').click(function(evt) {
                // 判断是否有选择的记录
                if( $(':checkbox[name="selected[]"]:checked').size() > 0) {
                    if (confirm('确定删除否')) {
                        $('#form-list').submit();
                    }
                }
            });
        })
    </script>
  <script>
        $(function(){
            $('a.link-deep').click(function(evt) {
                //当前tr
            var currTr = $(this).parents('tr');

            //后续tr
                var nextTrs=currTr.nextAll('tr');
                //遍历所有的后续tr
                nextTrs.each(function(i){
                    //深度不比我大的，终止循环
                    if($(this).data('deep')<=currTr.data('deep')) return false;

                    //根据当前状态选择隐藏或者展示
                    if('show'==currTr.data('status')){
                        $(this).hide();//隐藏
                        //在tr 中找到i class=fa
                        $(this).find('a.link-deep>i.fa').removeClass('fa-minus').addClass('fa-plus');
                    }else{
                        $(this).show();//显示
                        //在tr 中找到 i class=fa
                        $(this).find('a.link-deep>i.fa').removeClass('fa-plus').addClass('fa-minus');
                    }
                });
                //更改当前tr的状态
                if('show'==currTr.data('status')){
                    currTr.data('status','hide');
                    currTr.find('a.link-deep>i.fa').removeClass('fa-minus').addClass('fa-plus');
                }else{
                    currTr.data('status','show');
                    currTr.find('a.link-deep>i.fa').removeClass('fa-plus').addClass('fa-minus');
                }

                //阻止默认
                evt.preventDefault();
            })
        })
    </script>
</block>